<template>
  <div class="padding grid-content height-100">
    <div class="block---1">
      <el-form class="search-form bottom-0" inline>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="range" type="monthrange"
            format="yyyy-MM" value-format="yyyy-MM"
            start-placeholder="开始时间" end-placeholder="结束时间"
            range-separator="至" style="width: 400px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-block block---2">
      <div class="info-head dark-info-head-border">万元产值综合能耗</div>
      <div class="info-content">
        <v-chart
          :option="chartOption1" style="width:100%;height:300px;"
          :theme="chartTheme" autoresize
        ></v-chart>
      </div>
    </div>
    <div class="content-block block---3">
      <div class="info-head dark-info-head-border">工业总产值/增加值</div>
      <div class="info-content">
        <v-chart
          :option="chartOption2" style="width:100%;height:300px;"
          :theme="chartTheme" autoresize
        ></v-chart>
      </div>
    </div>
    <div class="content-block block---4">
      <div class="info-head dark-info-head-border">单位产品综合能耗</div>
      <div class="info-content">
        <v-chart
          :option="chartOption3" style="width:100%;height:300px;"
          :theme="chartTheme" autoresize
        ></v-chart>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.grid-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr 1fr;
  grid-gap: $gutter;
}
.block---4,
.block---1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.block---2,
.block---3,
.block---4 {
  background: white;
  border-radius: 4px;
}
.info-head {
  padding: 20px $gutter $gutter;
  font-size: 16px;
  border-bottom: 1px solid #eeeeee;
}
</style>

<script>
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'energy-efficiency-index-analysis',
  mixins: [MixinVchartTheme],
  data () {
    const end = this.$dayjs().format('YYYY-MM')
    const start = this.$dayjs().subtract(11, 'month').format('YYYY-MM')
    return {
      range: [start, end],
      info1: [],
      info2: [],
      info3: [],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    start () {
      const { range } = this
      return range[0]
    },
    end () {
      const { range } = this
      return range[1]
    },
    months () {
      const { start, end } = this
      const ret = []
      let temp = end
      while (temp !== start) {
        ret.unshift(temp)
        temp = this.$dayjs(temp).subtract(1, 'month').format('YYYY-MM')
      }
      ret.unshift(start)
      return ret
    },
    chartOption1 () {
      return {
        grid: {
          left: '6%',
          right: '6%',
          bottom: '8%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        xAxis: {
          type: 'category',
          data: this.months,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            type: 'line',
            smooth: true,
            itemStyle: {
              color: this.themeColor
            },
            areaStyle: {
              color: this.themeColor,
              opacity: 0.2
            },
            data: this.months.map(() => Math.round(Math.random() * 99 + 1))
          }
        ],
      }
    },
    chartOption2 () {
      return {
        grid: {
          left: '6%',
          right: '6%',
          bottom: '8%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        xAxis: {
          type: 'category',
          data: this.months,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            type: 'line',
            smooth: true,
            itemStyle: {
              color: this.themeColor
            },
            areaStyle: {
              color: this.themeColor,
              opacity: 0.2
            },
            data: this.months.map(() => Math.round(Math.random() * 99 + 1))
          }
        ],
      }
    },
    chartOption3 () {
      return {
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        xAxis: {
          type: 'category',
          data: this.months,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            type: 'line',
            smooth: true,
            itemStyle: {
              color: this.themeColor
            },
            areaStyle: {
              color: this.themeColor,
              opacity: 0.2
            },
            data: this.months.map(() => Math.round(Math.random() * 99 + 1))
          }
        ],
      }
    },
  },
}
</script>
